<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Login</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
    <div id="app">
        <i-layout>
            <i-header>Header</i-header>
                <div style="text-align: center;margin-top: 50px;margin-bottom: 50px;margin-left: 550px">
                <i-form ref="formInline" :model="formInline" :rules="ruleInline" style="width: 280px"
                        action="/ok" method="post">
                    <form-item prop="user">账号
                        <i-input type="text" v-model="formInline.user" placeholder="Username" size="large">
                            <icon type="ios-person-outline" slot="prepend"></icon>
                        </i-input>
                    </form-item>
                    <form-item prop="password">密码
                        <i-input type="password" v-model="formInline.password" placeholder="Password" size="large">
                            <icon type="ios-lock-outline" slot="prepend"></icon>
                        </i-input>
                    </form-item>
                    <form-item>
                        <div style="margin-top: 20px">
                            <i-button type="primary" @click="toRegister" style="margin-left: 20px" >注册</i-button>
                            <i-button type="primary" @click="handleSubmit('formInline')" style="margin-left: 20px" >登录</i-button>
                            <i-button type="success" @click="visitor" style="margin-left: 20px">游客登陆</i-button>
                        </div>
                    </form-item>
                </i-form>
                </div>

            <i-footer>
                <div style="text-align: center">
                    天津职业技术师范大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;软件1701&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宿嘉
                </div>
            </i-footer>
        </i-layout>
    </div>

</body>
<script>
    var Main = {
        data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            toRegister(){
                window.location.href = '/Register';
            },
            save() {
                let userAccount=this.formInline.user;
                let userPwd=this.formInline.password;
                $.ajax({
                    type: "post",
                    url: "/login",
                    data: {
                        "userAccount":userAccount,
                        "userPwd":userPwd
                    },
                    success(res){
                        let msg = JSON.stringify(res);
                        alert(msg);
                        if(res==="ERROR"){
                            alert('用户名或密码错误!');
                        }else{
                            toWelcome();
                        }
                    }
                })
            },
            visitor(){
                $.ajax({
                    type: "post",
                    url: "/visitorLogin",
                    success(res) {
                        let msg = JSON.stringify(res);
                        alert("欢迎游客:" + msg);
                        toWelcome();
                    }
                })
            }
        }
    };
    var Component = Vue.extend(Main);
    new Component().$mount('#app');

    function toWelcome(){
        window.location.href = '/Welcome';
    }


</script>
</html>